<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: snzo.chen
 * @Date: 2023-11-27 09:54:43
 * @LastEditors: snzo.chen
 * @LastEditTime: 2023-12-20 15:44:11
-->
<template>
  <Editor :init="initConfig" v-model="contentValue" />
</template>
<script lang="ts" setup>
import Editor from "@tinymce/tinymce-vue";
// import 'tinymce/skins/content/default/content.css'
import "tinymce/themes/silver/theme.min.js";
import "tinymce/icons/default/icons";
import "tinymce/plugins/code";
import "tinymce/plugins/image";
import "tinymce/plugins/media";
import "tinymce/plugins/link";
import "tinymce/plugins/fullscreen";
import { reactive, ref } from "vue";
import { uploadImg, uploadOther, uploadVideo } from "@/api/upload";
import { message as $message } from "ant-design-vue";
import { HTTP_URL } from "@/enums/httpEnum";

defineOptions({
  name: "RichTextEditor",
});

const props = defineProps({
  initialValue: {
    type: String,
    default: "",
  },
  editConfig: {
    type: Object,
    default(rawProps) {
      return rawProps;
    },
  },
});
const defaultConfig = {
  selector: "#myEditor",
  height: 500,
  language_url: "/tinymce/langs/zh-Hans.js",
  language: "zh-Hans",
  menubar: false,
  branding: false,
  tinycomments_mode: "embedded",
  plugins: "code image media fullscreen link",
  toolbar:
    "code | image media link | bold italic backcolor | \
          alignleft aligncenter alignright alignjustify | \
          bullist numlist outdent indent | removeformat",
  file_picker_types: "file image media",
  file_picker_callback: (callback: any, value: any, meta: any) => {
    filePickerCallback(callback, value, meta);
  },
};
const initConfig = reactive(Object.assign(defaultConfig, props.editConfig));

const contentValue = ref(props.initialValue);

/**
 * 上传文件
 */
const filePickerCallback = async (callback, _value, meta) => {
  const input = document.createElement("input");
  input.setAttribute("type", "file");

  input.addEventListener("change", (e: any) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      if (meta.filetype === "file") {
        uploadOther(file)
          .then((res) => {
            if (res.status === 200) {
              const AP = HTTP_URL + res.data;
              callback(AP, { text: file.name });
            } else {
              $message.error("上传失败");
              callback();
            }
          })
          .catch(() => {
            $message.error("上传失败，服务器出了点小问题！");
            callback();
          });
      }

      if (meta.filetype === "image") {
        uploadImg(file)
          .then((res) => {
            if (res.status === 200) {
              const AP = HTTP_URL + res.data;
              callback(AP, { text: file.name });
            } else {
              $message.error("上传失败");
              callback();
            }
          })
          .catch(() => {
            $message.error("上传失败，服务器出了点小问题！");
            callback();
          });
      }

      if (meta.filetype === "media") {
        uploadVideo(file)
          .then((res) => {
            if (res.status === 200) {
              const AP = HTTP_URL + res.data;
              callback(AP, { text: file.name });
            } else {
              $message.error("上传失败");
              callback();
            }
          })
          .catch(() => {
            $message.error("上传失败，服务器出了点小问题！");
            callback();
          });
      }
    });
    reader.readAsDataURL(file);
  });
  input.click();
};

defineExpose({
  contentValue,
});
</script>
